<script setup lang="ts">
import { useRouter } from 'vue-router';
import {
  Bell,
  LogOut,
  Sparkles,
  UserRoundCog,
  PanelLeftClose,
} from 'lucide-vue-next';

import { useSidebar } from '@/components/ui/sidebar';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();

const router = useRouter();
const user = computed(() => authStore.user);

const { isMobile, open, toggleSidebar } = useSidebar();

function handleLogout() {
  authStore.logout();
  router.push('/login');
}
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
          >
            <Avatar class="size-8 rounded-lg">
              <AvatarImage :src="user?.avatar || ''" :alt="user?.name || ''" />
              <AvatarFallback class="rounded-lg">
                CN
              </AvatarFallback>
            </Avatar>
            <div class="grid flex-1 text-sm leading-tight text-left">
              <span class="font-semibold truncate">{{ user?.name }}</span>
              <span class="text-xs truncate">{{ user?.email }}</span>
            </div>
            <PanelLeftClose class="ml-auto size-4 cursor-pointer" @click.stop="toggleSidebar" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>

        <DropdownMenuContent
          class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
          :side="isMobile || open ? 'bottom' : 'right'"
          align="start"
          :side-offset="4"
        >
          <DropdownMenuLabel class="p-0 font-normal">
            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
              <Avatar class="size-8 rounded-lg">
                <AvatarImage :src="user?.avatar || ''" :alt="user?.name || ''" />
                <AvatarFallback class="rounded-lg">
                  CN
                </AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-sm leading-tight text-left">
                <span class="font-semibold truncate">{{ user?.name }}</span>
                <span class="text-xs truncate">{{ user?.email }}</span>
              </div>
            </div>
          </DropdownMenuLabel>

          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <Sparkles />
              个性化设置
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuGroup>
            <DropdownMenuItem @click="$router.push('/common/account-setting')">
              <UserRoundCog />
              账号设置
            </DropdownMenuItem>
            <DropdownMenuItem @click="$router.push('/common/notifications')">
              <Bell />
              系统通知
            </DropdownMenuItem>
          </DropdownMenuGroup>

          <DropdownMenuSeparator />
          <DropdownMenuItem @click="handleLogout">
            <LogOut />
            退出登录
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>
